<template>
    <div class="detail">
        <!-- 头部导航栏 -->
        <van-nav-bar title="详情页" @click-left="onClickLeft">
            <!-- 左箭头 -->
            <template #left>
                <van-icon name="arrow-left" size="28" color="black" />
            </template>
            <!-- 右菜单 -->
            <template #right>
                <van-popover v-model="showPopover" trigger="click" :actions="actions" @select="onSelect"
                    placement="bottom-end">
                    <template #reference>
                        <van-icon name="ellipsis" size="32" color="black" />
                    </template>
                </van-popover>
                <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" @select="onSelect1" />
            </template>
        </van-nav-bar>
        <!-- --轮播图---- -->
        <van-swipe :autoplay="3000" class="mySwipe">
            <van-swipe-item v-for="(item, index) in bannerList" :key="index">
                <img :src="item" />
            </van-swipe-item>
        </van-swipe>

        <!-- ----加入购物车----- -->
        <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
            <van-goods-action-icon icon="cart-o" text="购物车" />
            <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
            <van-goods-action-button type="warning" text="加入购物车" @click="addCart"/>
            <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>
    </div>
</template>
<script>
import { doAddCart } from "../api/cart";
import { getBannerList } from '../api/detail';
import Vue from 'vue';
import { Swipe, SwipeItem, NavBar, GoodsAction, GoodsActionButton, GoodsActionIcon, Popover, ShareSheet, Toast } from 'vant';

Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(NavBar);
Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
Vue.use(Popover);
Vue.use(ShareSheet);
Vue.use(Toast);
export default {
    data() {
        return {
            bannerList: [],
            showPopover: false,
            actions: [
                { text: "首页", icon: "wap-home-o" },
                { text: "分享", icon: "share-o" },
            ],
            showShare: false,
            options: [
                [
                    { name: '微信', icon: 'wechat' },
                    { name: '朋友圈', icon: 'wechat-moments' },
                    { name: '微博', icon: 'weibo' },
                    { name: 'QQ', icon: 'qq' },
                ],
                [
                    { name: '复制链接', icon: 'link' },
                    { name: '分享海报', icon: 'poster' },
                    { name: '二维码', icon: 'qrcode' },
                    { name: '小程序码', icon: 'weapp-qrcode' },
                ],
            ],
            title:'',
            price:'',
            proid:'',
        }
    },
    created() {
        getBannerList(this.$route.params.proid).then(res => {
            // console.log(res.data.data.banners[0].split(","));
            this.bannerList = res.data.data.banners[0].split(",");
            this.title = res.data.data.proname;
            this.price = res.data.data.originprice;
            this.proid = res.data.data.proid;
        })
    },
    methods: {
        onClickLeft() {
            this.$router.back()
        },
        onSelect(action, index) {
            switch (index) {
                case 0:
                    this.$router.push("/home");
                    break;
                case 1:
                    this.showShare = true;
                    break;
                default:
                    break;
            }
        },
        onSelect1(option) {
            console.log(option.name);
            this.showShare = false;
        },
        addCart(){
            // 判断是否登录
            if (!localStorage.getItem("token")) {
                this.$router.push("/login");
            } else {
                // 调用接口加入购物车
                doAddCart({userid:localStorage.getItem("userid"),proid:this.proid ,num:"1"}).then(res=>{
                    console.log(res);
                    if (res.data.code == '200') {
                        Toast("加入购物车成功")
                    }
                })
            }
        }
    }
}
</script>


<style scoped>
.mySwipe {
    height: 2.5rem;
}

.mySwipe img {
    width: 100%;
}

.vic {
    color: black;
}
</style>